<template>
	<li class="comment-item">
		<router-link :to="`/userhomepage/${userinfo.userinfo.user_id}`"> <el-avatar shape="square" :src="`${ENV.VITE_BASE_URL}${props.commentItem?.user.avatar}`" /> </router-link>
		<div class="main">
			<div class="content">
				<router-link :to="`/userhomepage/${userinfo.userinfo.user_id}`" class="nickName">{{ props.commentItem?.user.nickName }}</router-link>
				<span> : {{ props.commentItem!.content }}</span>
			</div>
			<div class="funt_area">
				<span class="createAt">{{ formatTime(props.commentItem!.createdAt) }}</span>
				<a class="thumb_up" href="javascript:void(0);">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-dianzan"></use>
					</svg>
					点赞
				</a>
			</div>
		</div>
	</li>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import formatTime from "@/util/formatTime";
import { useUserinfoStore } from "@/stores/userinfo";
const userinfo = useUserinfoStore();
const ENV = import.meta.env;
const props = defineProps({
	commentItem: {
		type: Object as PropType<commentItemType>
	}
});
</script>

<style scoped lang="scss">
.comment-item {
	min-height: 54px;
	padding: 5px 0px;
	font-size: 12px;
	width: 100%;
	display: flex;
}

.el-avatar {
	border-radius: 0;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	margin-top: 4px;
}
.main {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.content {
		word-break: break-all;
		line-height: 20px;
		span {
			cursor: text;
		}
	}
	.nickName {
		color: $orange;
	}
}
.funt_area {
	display: flex;
	width: 100%;
	justify-content: space-between;
	color: #808080;
	.createAt {
		cursor: text;
	}
}
</style>
